<!-- <div id="content_header">
  <h3>Payment</h3>
</div> -->

<!-- SLIDE PANEL - BANK TRANSFERS -->
<div style="padding:20px" id="formBank">
  <h3>Select Bank Transfers <a href="" ng-click="psBank = !psBank"><i class="simple-icon-close"></i></a></h3>
  <hr>

  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="row">
        <div class="col-xs-12 col-md-12 col-lg-12" dir-paginate="transfer in bankTransfers | itemsPerPage: pagesize" total-items="BT.totalItems">
          <dl>
            <dt>{{ transfer.RefNumber }} <input type="checkbox" ng-checked="checkSelected(transfer.Id)" ng-click="toggleSelection(transfer)"></dt>
            <dd class="text-muted"><i class="simple-icon-pointer"></i> {{ transfer.Amount | currency:'Rp. ' }}</dd>
            <dd class="text-muted"><i class="simple-icon-envelope-open"></i> {{ transfer.Sender }}</dd>
            <dd class="text-muted"><i class="simple-icon-call-end"></i> {{ transfer.Date | date:'medium' }}</dd>
          </dl>
        </div>
      </div>
    </div>
    <dir-pagination-controls on-page-change="pageChangedBT(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
    <hr>
  </div>
  <!-- <a href="" class="btn btn-primary" ng-click="openModal(payment)">New Detailed Contact</a> -->
</div>

<!-- SLIDE PANEL - CREDIT CARD -->
<div style="padding:20px" id="formCredit">
  <h3>CC Transfer <a href="" ng-click="psCredit = !psCredit"><i class="simple-icon-close"></i></a></h3>
  <hr>

  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <!-- <div class="row">
        <div class="col-xs-12 col-md-12 col-lg-12" dir-paginate="transfer in creditCards | itemsPerPage: pagesize" total-items="CC.totalItems">
          <dl>
            <dt>{{ transfer.CardNumber }} <input type="checkbox" ng-checked="checkSelectedCC(transfer.Id)" ng-click="toggleSelectionCC(transfer)"></dt>
            <dd class="text-muted"><i class="simple-icon-pointer"></i> {{ transfer.Amount | currency:'Rp. ' }}</dd>
            <dd class="text-muted"><i class="simple-icon-user"></i> {{ transfer.Name }}</dd>
            <dd class="text-muted"><i class="simple-icon-call-end"></i> {{ transfer.CreditCardType.Name }}</dd>
          </dl>
        </div>
      </div> -->
      <form name="form" role="form" ng-submit="addCC()">

        <div class="form-group" ng-class="{ 'has-error': errors.CreditCardType}">
          <label class="required" for="CreditCardTypeId">Credit Card</label>
          <select name="" class="form-control" id="CreditCardTypeId" ng-model="CC.CreditCardType.Id" ng-options="creditcard.Id as creditcard.Name for creditcard in creditcardtypes" required>
            <option value="" ng-hide="CC.CreditCardType.Id">Select a Credit Card.</option>
          </select>
          <error-widget field="errors.CreditCardType"></error-widget>
        </div>

        <div class="form-group" ng-class="{ 'has-error': errors.CardNumber}">
          <label class="required" for="CardNumber">Card Number</label>
          <input type="text" name="CardNumber" class="form-control" id="CardNumber" placeholder="Input field" ng-model="CC.CardNumber" required>
          <error-widget field="errors.CardNumber"></error-widget>
        </div>

        <div class="form-group" ng-class="{ 'has-error': errors.Amount}">
          <label class="required" for="Amount">Amount</label>
          <input type="number" name="Amount" class="form-control" id="Amount" placeholder="Input field" ng-model="CC.Amount" required>
          <error-widget field="errors.Amount"></error-widget>
        </div>

        <div class="form-group" ng-class="{ 'has-error': errors.Name}">
          <label class="required" for="Name">Name</label>
          <input type="text" name="Name" class="form-control" id="Name" placeholder="Input field" ng-model="CC.Name" required>
          <error-widget field="errors.Name"></error-widget>
        </div>

        <div class="form-group" ng-class="{ 'has-error': errors.ExpirationMonth}">
          <label class="required" for="ExpirationMonth">Expire Month</label>
          <input type="number" name="ExpirationMonth" class="form-control" id="ExpirationMonth" placeholder="Input field" ng-model="CC.ExpirationMonth" min="0" max="12" required>
          <error-widget field="errors.ExpirationMonth"></error-widget>
        </div>

        <div class="form-group" ng-class="{ 'has-error': errors.ExpirationYear}">
          <label class="required" for="ExpirationYear">Expire Year</label>
          <input type="number" name="ExpirationYear" class="form-control" id="ExpirationYear" placeholder="Input field" ng-model="CC.ExpirationYear" min="1991" required>
          <error-widget field="errors.ExpirationYear"></error-widget>
        </div>

        <button type="submit" class="btn btn-primary" >Submit</button>
      </form>
    </div>
    <!-- <dir-pagination-controls on-page-change="pageChangedCC(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls> -->
    <hr>
  </div>
</div>

<!-- SLIDE PANEL - DISCOUNTS -->
<pageslide ps-size="550px" ps-speed="0.25" ps-auto-close="true" ps-open="psDiscounts">
  <div style="padding:20px">
    <h3>Manage Discounts <a href="" ng-click="psDiscounts = !psDiscounts"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <table class="table table-condensed table-hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Amount</th>
              <th>Percentage</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="discount in discounts">
              <td><a href ng-click="selectThisDiscount(discount)">{{ discount.DiscountType.Name }}</a></td>
              <td>{{ discount.Amount ? (discount.Amount | currency:'Rp. ') : '-' }}</td>
              <td>{{ discount.Percentage ? discount.Percentage+'%' : '-' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</pageslide>

<div class="row">
  <h3>{{ payment.TransactionNumber }}</h3>
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <form role="form" ng-submit="postPayment()">

      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="form-group">
            <label for="payer">Received From</label>
            <span class="form-control">{{ payment.ReceivedFrom }}</span>
          </div>

          <div class="form-group" ng-click="openDatepicker($event, 0)" ng-class="{ 'has-error': errors.PaymentDate}">
            <label class="required" for="">Payment Date</label>
            <div class="input-group">
              <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="payment.PaymentDate" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
              <span class="form-control">{{ payment.PaymentDate | date: 'dd MMMM yyyy' }}</span>
              <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
            </div>
            <error-widget field="errors.PaymentDate"></error-widget>
          </div>

          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4 class="panel-title">Items</h4>
            </div>
            <div class="panel-body">
              <table class="table table-striped table-condensed table-bordered">
                <thead>
                  <tr>
                    <th></th>
                    <th class="text-center">Student</th>
                    <th class="text-center">Item</th>
                    <th class="text-center">Qty</th>
                    <th class="text-center">Discount</th>
                    <th class="text-center">Total</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="invoice in payment.Invoices">
                    <td>{{ $index + 1 }}
                    <!--
                      <a href="" ng-click="openModal(payment)"><i class="simple-icon-tag"></i></a>
                      &nbsp
                      <a href="" ng-click="removeRow($index)"><i class="simple-icon-trash"></i></a>
                    --></td>
                    <td>
                      <span ng-if="invoice.PlacementTest"><strong>{{ invoice.PlacementTest.Student.FullName }}</strong> - {{ invoice.PlacementTest.Student.SID }}</span>
                      <span ng-if="invoice.Enrollment"><strong>{{ invoice.Enrollment.Student.FullName }}</strong> - {{ invoice.Enrollment.Student.SID }}</span>
                      <span ng-if="invoice.MakeUpTest"><strong>{{ invoice.MakeUpTest.Enrollment.Student.FullName }}</strong> - {{ invoice.MakeUpTest.Enrollment.Student.SID }}</span>
                    </td>
                    <td>
                      <span ng-if="invoice.InvoiceType === 0">
                        <small>
                          PT on {{ invoice.PlacementTest.DateTime | date:'fullDate' }}
                        </small>
                      </span>
                      <span ng-if="invoice.InvoiceType === 1">
                        <small>
                          {{ invoice.Enrollment.CourseSchedule.CourseName }}
                        </small>
                      </span>
                      <span ng-if="invoice.InvoiceType === 2">
                        <small>
                          <span class="label label-warning">MUT</span>
                          <strong>{{ MakeUpTestTypes[invoice.MakeUpTest.Type].Label }}</strong> {{ invoice.MakeUpTest.MakeUpTestSchedule.DateTime | date:'medium'  }}
                        </small>
                      </span>
                    </td>
                    <td class="text-center">{{ (invoice.PlacementTest || invoice.Enrollment) ? '1' : '0' }}</td>
                    <td>{{ invoice.TotalDiscount ? (invoice.TotalDiscount | currency:'Rp. ') : '-'  }}</td>
                    <!-- <td>
                      <span class="form-control" style="text-align: right;">
                        <span ng-show="invoice.TotalDiscount">
                          <strike><small>{{ invoice.TotalAmount | currency: 'Rp. ' }}</small></strike> {{ (invoice.TotalAmount - invoice.TotalDiscount) | currency: 'Rp. ' }}
                        </span>
                        <span ng-hide="invoice.TotalDiscount">
                          {{ invoice.TotalAmount | currency: 'Rp. ' }}
                        </span>
                      </span>
                    </td> -->
                    <td class="text-right">{{ invoice.TotalAmount | currency: 'Rp. ' }}</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <th colspan="5" class="text-right">Total</th>
                    <th class="text-right">{{ payment.TotalAmount | currency: 'Rp. ' }}</th>
                  </tr>
                  <tr>
                    <th colspan="5" class="text-right">Total Discount</th>
                    <th class="text-right">{{ payment.TotalDiscount | currency: 'Rp. ' }}</th>
                  </tr>
                  <tr>
                    <th colspan="5" class="text-right">Total Amount*</th>
                    <th class="text-right">{{ (payment.TotalAmount - payment.TotalDiscount) | currency: 'Rp. ' }}</th>
                  </tr>
                  <tr>
                  <th colspan="6" class="text-right"><small><i>*{{ (payment.TotalAmount - payment.TotalDiscount) | inWords }} rupiah</i></small></th>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>

          <div class="panel panel-primary">
            <div class="panel-heading">
              <h4 class="panel-title">Payment Method</h4>
            </div>
            <div class="panel-body">

              <div class="form-group">
                <label for="">Type</label>
                <label><input type="radio" name="payMethod" ng-value="0" ng-model="pay.payMethod">Direct Payment</label>
                <label><input type="radio" name="payMethod" ng-value="1" ng-model="pay.payMethod">Transfer</label>
              </div>

              <div class="form-group">
                <label for="PaymentMethod">Method</label>
                <select name="PaymentMethod" id="PaymentMethod" class="form-control" ng-model="payment.PaymentMethod" ng-options="PaymentMethod.Id as PaymentMethod.Label for PaymentMethod in PayMeths">
                  <option value="" ng-hide="payment.PaymentMethod >= 0">Select Payment Method.</option>
                </select>
              </div>

              <table class="table table-condensed">
                <tbody>
                <tr ng-show="(payment.PaymentMethod === 0 || payment.CashAmount) && pay.payMethod === 0">
                    <td>Cash <a href ng-click="removeCash()">Remove</a></td>
                    <td>
                    <input type="text" class="form-control" id="CashAmount" placeholder="Input field" ng-model="payment.CashAmount">
                    </td>
                    <td class="text-right">{{ payment.CashAmount | currency:'Rp. ' }}</td>
                  </tr>
                  <tr ng-show="(payment.PaymentMethod === 2 || payment.CreditCardPayments.length>0) && pay.payMethod === 0">
                    <td>Credit/Debit Card <a href ng-click="removeCC()">Remove</a></td>
                    <td>
                      <table class="table table-condensed table-bordered">
                        <thead>
                          <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Card Type</th>
                            <th>Expiration</th>
                            <th>Amount</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="transfer in payment.CreditCardPayments">
                            <td><a href="" ng-click="removeTransferCC(transfer.Id)"><i class="simple-icon-trash"></i></a></td>
                            <td>{{ transfer.Name }}</td>
                            <td>{{ transfer.CardNumber }}</td>
                            <td>{{ transfer.ExpirationMonth }} - {{ transfer.ExpirationYear }}</td>
                            <td>{{ transfer.Amount | currency:'Rp. ' }}</td>
                          </tr>
                        </tbody>
                        <tfoot>
                          <tr>
                            <td colspan="5">
                              <a class="btn btn-block" pageslide="right" ps-speed="0.25" href="#formCredit" ps-auto-close="true" ps-open="psCredit" ng-click="psCredit = !psCredit"><i class="fa fa-plus"></i></a>
                            </td>
                          </tr>
                        </tfoot>
                      </table>
                    </td>
                    <td class="text-right">{{ CCPayment | currency:'Rp. ' }}</td>
                  </tr>
                  <tr ng-show="(payment.PaymentMethod === 3 || payment.BankTransfers.length>0) && pay.payMethod === 1">
                    <td>Bank Transfer <a href ng-click="removeBT()">Remove</a></td>
                    <td>
                      <table class="table table-condensed table-bordered">
                        <thead>
                          <tr>
                            <th></th>
                            <th>Sender</th>
                            <th>Date</th>
                            <th>Note</th>
                            <th>Amount</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="transfer in payment.BankTransfers">
                            <td><a href="" ng-click="removeTransfer(transfer.Id)"><i class="simple-icon-trash"></i></a></td>
                            <td>{{ transfer.Sender }}</td>
                            <td>{{ transfer.Date | date:'medium' }}</td>
                            <td>{{ transfer.note }}</td>
                            <td>{{ transfer.Amount | currency:'Rp. ' }}</td>
                          </tr>
                        </tbody>
                        <tfoot>
                          <tr>
                            <td colspan="5">
                              <a class="btn btn-block" pageslide="right" ps-speed="0.25" href="#formBank" ps-auto-close="true" ps-open="psBank" ng-click="psBank = !psBank"><i class="fa fa-plus"></i></a>
                            </td>
                          </tr>
                        </tfoot>
                      </table>
                    </td>
                    <td class="text-right">{{ BankPayment | currency:'Rp. ' }}</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="2" class="text-right">Total</td>
                    <td class="text-right">{{ (payment.TotalAmount - payment.TotalDiscount) | currency: 'Rp. ' }}</td>
                  </tr>
                  <tr>
                    <td colspan="2" class="text-right">Payment</td>
                    <td class="text-right">{{ payment.TotalPayment | currency:'Rp. ' }}</td>
                  </tr>
                  <tr>
                    <td colspan="2" class="text-right">Changes</td>
                    <td class="text-right">
                      <span ng-if="payment.Change>=0"><strong>{{ payment.Change | currency:'Rp. ' }}</strong></span>
                      <span ng-if="payment.Change<0">Insufficient Payment</span>
                    </td>
                  </tr>
                </tfoot>
              </table>
              <div class="form-group" ng-class="{ 'has-error': errors.Note}">
                <label class="required" for="Note">Note</label>
                <input type="text" class="form-control" id="Note" placeholder="Input field" ng-model="payment.Note">
                <error-widget field="errors.Note"></error-widget>
              </div>

            </div>
          </div>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
      <a ui-sref="^.list" class="btn btn-default pull-right">Cancel</a>

    </form>
  </div>
</div>